<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>模块于组件的理解  组件的基本定义和使用 面向组件编程</title>
</head>
<body>
    <div id="example1"></div>   
    <div id="example2"></div>    
</body>
</html>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
<script type="text/babel" >
/*
组件化模块化 ？ 
    特定功能的一个js文件  数据 数据操作 私有函数向外按需暴露 
    尽可能的将页面拆分成一个个小的、可复用的组件。 这样让我们的代码更加方便组织和管理，并且扩展性也更强
    React 准许开发者基于‘单向数据流’ 的原则 完成组件间通讯 而组件之间的通讯又将改变 通讯双方 某一方内部的数据 进而对渲染结果构成影响 
    */
    
    //组件化  1定义组件 (多种方式)
    //1 工厂函数组件(简单的组件)
    function Mycomponent(){                     //没有生命周期，也会被更新并挂载， 没有this(组件实例） 没有内部状态（state）后边接触hook就不一样了 
        console.log(this)                       //undefined
        return <h2> 工厂函数组件简单组件 </h2>
    }


    //2 es6类组件(复杂组件)
    class Mycomponent2 extends React.Component{ //类组件需要继承自 React.Component 类组件必须实现render函数
       render(){                                //rende方法的返回值描述了你希望在屏幕上看到的内容 React根据描述然后把结果展示出来 更具体地来说，render返回了一个React 元素
            console.log(this)                   //实例组件对象 Mycomponent2   
            return <h2>  e类组件复杂组件</h2>
        }
    }


    //2 渲染组件标签 
    ReactDOM.render(<Mycomponent />,document.getElementById("example1"))
    ReactDOM.render(<Mycomponent2 />,document.getElementById("example2"))
/*
*照不同的方式可以分成很多类组件：
*根据组件的定义方式，可以分为：
            函数组件    (Functional Component)    函数组件、无状态组件、展示型组件主要关注UI的展示； 后边接触hook就不一样了
            类组件      (Class Component)         类组件、  有状态组件、容器型组件主要关注数据逻辑；  
根据组件内部是否有状态需要维护，可以分成：
            无状态组件  (Stateless Component)
            有状态组件  (Stateful Component)
根据组件的不同职责，可以分成：  
            展示型组件  (Presentational Component)
            容器型组件  (Container Component)
*/






</script>